<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作用域插槽</title>
	<script src="vue.js"></script>
</head>
<body>
	<!-- 子组件做一个循环, 但是循环的样式由外部的插槽内容决定 -->
	<!-- 作用域插件必须是一个 template的闭合标签, 然后有一个 slot-scope对应传入的值. -->
	<div id="root">
		<child>
			<template slot-scope="props">
				<li>{{props.item}}</li>
			</template>
		</child>
	</div>
	
	
	<script>
		Vue.component('child', {
			data: function() {
				return {
					list: [1,2,3,4]
				}
			},
			template: `
				<div>
					<ul>
						<slot v-for="item of list" :item=item>
						</slot>
					</ul>
				</div>
			`
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>



</body>
</html>